<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>bootstrap 初体验</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <h2>按钮</h2>
      <button>按钮</button>
      <button class="btn btn-default">button按钮</button>
      <a class="btn btn-default">a 按钮</a>
      <input type="button" class="btn btn-default" value="input 按钮">
      <hr>
      <button class="btn btn-primary">button按钮</button>
      <button class="btn btn-danger">button按钮</button>
      <button class="btn btn-success">button按钮</button>
      <button class="btn btn-info">button按钮</button>
      <button class="btn btn-warning">button按钮</button>
      <hr>
      <button class="btn btn-primary btn-lg">大号按钮</button>
      <button class="btn btn-primary btn-md">中号按钮</button>
      <button class="btn btn-primary btn-sm">小号按钮</button>
      <button class="btn btn-primary btn-xs">超小号按钮</button>
      
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script>
      //获取 email 元素
      let email = document.querySelector('input[type=email]');

      //绑定事件
      email.onblur = function(){
        //为父级节点添加 has-error 类名
        this.parentNode.classList.add('has-error');
        //将下一个同辈元素的 hidde 类移除
        this.nextElementSibling.classList.remove('hidden');
      }

    </script>
  </body>
</html>
